<template>
	<div class="maintain_container" v-loading="loading">
		<el-tabs v-model="activeName" type="card">
			<el-tab-pane label="液氦记录" name="1"></el-tab-pane>
			<el-tab-pane label="液氮记录" name="2"></el-tab-pane>
		</el-tabs>
		<div class="sw_system_container">
			<div class="sw_query_form" v-if="$isHasAuth(topButton)">
				<el-form size="small" inline>
					<el-form-item>
						<el-date-picker v-model="timeRanges" v-bind="dateConfig"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="queryTableData">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-refresh-left" @click="handleResetQuery">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="sw_table_container">
				<el-table ref="table" :data="tableData" height="100%" class="index_table_wrapper">
					<el-table-column label="序号" type="index" width="54" align="center"></el-table-column>
					<el-table-column label="检索时间段" width="230" :formatter="timeRangeFormat"></el-table-column>
					<el-table-column :label="nameLabel" min-width="150" prop="name"></el-table-column>
					<template v-if="activeName === '1'">
						<el-table-column label="液氦审批量(升)" prop="ycount" min-width="110"></el-table-column>
					</template>
					<el-table-column :label="`${quantityLabel}(升)`" prop="ccount" min-width="110"></el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import mixins from '../mixins';
import { mapGetters } from 'vuex';
import { queryHeliumData, queryAzoteData } from '@/api/business/stat';
export default {
	mixins: [mixins],
	data() {
		return {
			activeName: '1'
		};
	},
	computed: {
		...mapGetters(['principalData']),
		nameLabel() {
			if (this.activeName === '1') {
				return 'PI';
			} else if (this.activeName === '2') {
				return '实验站';
			}
		},
		quantityLabel() {
			if (this.activeName === '1') {
				return '液氦消耗';
			} else if (this.activeName === '2') {
				return '液氮消耗';
			}
		},
		dataListRequest() {
			if (this.activeName === '1') {
				return queryHeliumData;
			} else if (this.activeName === '2') {
				return queryAzoteData;
			}
		},
		topButton() {
			if (this.activeName === '1') {
				return ['02925e86bfa740d8b5873d57f462a01f'];
			} else if (this.activeName === '2') {
				return ['ff84a6c2ab9f4f329a0e6b9547e250f9'];
			}
		}
	},
	watch: {
		timeRanges(data) {
			if (!data) {
				this.$delete(this.queryData, 'startTime');
				this.$delete(this.queryData, 'endTime');
			} else {
				this.$set(this.queryData, 'startTime', data[0]);
				this.$set(this.queryData, 'endTime', data[1]);
			}
		},
		activeName: {
			handler(val) {
				this.handleResetQuery();
			},
			immediate: true
		}
	},
	methods: {
		//获取数据列表
		async getTableData() {
			let params = { ...this.queryData };
			let result = await this.dataListRequest(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.tableData = this.formatTableData(result.data || []);
			}
		},

		//查询数据列表
		queryTableData() {
			this.loading = true;
			this.getTableData();
		},

		//重置查询
		handleResetQuery() {
			let startTime = moment().subtract(1, 'months').startOf('months').format('YYYY-MM-DD HH:mm:ss');
			let endTime = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss');
			this.timeRanges = [startTime, endTime];
			this.$nextTick(() => {
				this.queryTableData();
			});
		},

		//列表数据格式化
		formatTableData(arr) {
			if (this.activeName === '1') {
				let datas = this.$detailData(arr);
				return this.principalData.map((item) => {
					let obj = { name: item.userName, startTime: this.timeRanges[0], endTime: this.timeRanges[1] };
					let yyData = datas.plist.find((n) => n.name === item.id);
					let xhData = datas.phList.find((n) => n.name === item.id);
					obj['ccount'] = !xhData ? '0.0' : xhData.ccount;
					obj['ycount'] = !yyData ? '0.0' : yyData.ccount;
					return obj;
				});
			} else if (this.activeName === '2') {
				return arr.map((n) => {
					return { ...n, startTime: this.timeRanges[0], endTime: this.timeRanges[1] };
				});
			}
		},

		//时间段格式化
		timeRangeFormat(data) {
			let endTime = moment(data.endTime).format('YYYY-MM-DD');
			let startTime = moment(data.startTime).format('YYYY-MM-DD');
			return `${startTime} 至 ${endTime}`;
		}
	}
};
</script>

<style lang="scss" scoped>
:deep(.maintain_container) {
	display: flex;
	flex-direction: column;
	height: 100%;
	.el-tabs {
		flex-shrink: 0;
	}
	.el-tabs__header {
		margin-bottom: 0;
	}
	.el-tabs__item {
		font-size: 16px;
		&.is-active {
			background-color: #fff;
		}
	}
	.sw_system_container {
		flex: 1;
		overflow: hidden;
		border: solid 1px #e4e7ed;
		border-top: none;
	}
}
</style>
